<template>
    <div>
      <h2>考勤管理</h2>
      <table>
        <thead>
          <tr>
            <th>员工姓名</th>
            <th>日期</th>
            <th>上班时间</th>
            <th>下班时间</th>
            <th>考勤状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="attendance in attendanceList" :key="attendance.id">
            <td>{{ attendance.employeeName }}</td>
            <td>{{ attendance.date }}</td>
            <td>{{ attendance.startTime }}</td>
            <td>{{ attendance.endTime }}</td>
            <td>{{ attendance.status }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        attendanceList: [
          { id: 1, employeeName: '员工A', date: '2024-10-01', startTime: '09:00', endTime: '18:00', status: '正常' },
          { id: 2, employeeName: '员工B', date: '2024-10-01', startTime: '09:10', endTime: '18:00', status: '迟到' },
          { id: 3, employeeName: '员工C', date: '2024-10-01', startTime: '09:00', endTime: '17:00', status: '早退' }
        ]
      };
    }
  };
  </script>
  
  <style scoped>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
  }
  </style>